<template>
  <view class="container">
    <!-- 头部 -->
    <!-- <view class="fixed-con">
      <statusBar></statusBar>
      <view class="go-back">
        <image src="../../static/go-back.svg" @click="goBack"/>
        <view>新增关注</view>
        <image class="img-hide" src="../../static/brands-search.svg"/>
      </view>
    </view> -->

    <navigationBar title="新增关注" backBarBorder="2rpx solid #F1F1F1"/>

    <view class="content">
      <view class="item" v-for="item in dataList.list" :key="item.id">
        <image :src="item.avatarUrl"/>
        <view class="item-con">
          <view class="item-nick">
            <text>{{item.nickName}}</text>
            <view>开始关注你了 <text>{{functions.timeText(item.createdTime)}}</text> </view>
          </view>
          <view class="backturn">回关</view>
        </view>
      </view>

    </view>

    <!-- 已经到底了 -->
    <view class="is-end" v-if="isEnd">没有更多了</view>

    <view class="safe-padding"></view>

  </view>
  
</template>

<script setup>
  import { ref, reactive, toRefs, onMounted, onUnmounted, getCurrentInstance } from 'vue'
  import { onReachBottom } from "@dcloudio/uni-app";	
  import { myNewInterestPages } from '@/api/user.js'
  import functions from '@/utils/functions.js'


  //是否加载结束
  const isEnd = ref(false)

  //分页数据
  const pageData = reactive({
    pageSize:10,
    page:1
  })

  const dataList = reactive({
    list: []
  })

  onMounted(() => {
    getMewInterestPages()
  })

  onReachBottom(() => {
    if(isEnd.value) return;
    pageData.page++
    getMewInterestPages()
  })

  const getMewInterestPages = async () => {
    let res = await myNewInterestPages({ ...pageData })
    if (res.list.length < pageData.pageSize) isEnd.value = true
    console.log('新增关注',res)
    dataList.list = res.list
  }

  const goBack = () => {
    uni.navigateBack({ delta: 1 })
  }
</script>

<style lang="scss" scoped>
  .container{
    width: 100vw;
    height: 100vh;
    /* position: fixed;
    top: 0;
    left: 0;
    overflow-y: scroll; */

    .fixed-con{
      position: fixed;
      top: 0;
      left: 0;
      z-index: 99;
      .go-back{
        width: 750rpx;
        height: 90rpx;
        padding:0 30rpx;
        box-sizing: border-box;
        background-color: white;
        border-bottom: 2rpx solid #F1F1F1;
        @include flex(row,space-between,center);
        image{
          width: 40rpx;
          height: 40rpx;
        }
        view{
          font-weight: 500;
          font-size: 32rpx;
          color: #333333;
        }
        .img-hide{
          opacity: 0;
        }
      }
    }

    .content{
      padding-top: calc(var(--status-bar-height) + 90rpx);
      .item{
        width: 750rpx;
        height: 144rpx;
        background: white;
        padding: 32rpx 0 0 30rpx;
        box-sizing: border-box;
        @include flex(row,flex-start,flex-start);

        image{
          width: 80rpx; 
          height: 80rpx;
          border-radius: 40rpx;
          margin-right: 32rpx;
        }

        .item-con{
          flex:1;
          height: 100%;
          border-bottom:2rpx solid #F1F1F1; 
          @include flex(row,flex-start,flex-start);

          .item-nick{
            flex:1;

            text{
              font-family: PingFangSC, PingFang SC;
              font-weight: 600;
              font-size: 30rpx;
              color: #222222;
            }
            >view{
              font-family: PingFangSC, PingFang SC;
              font-weight: 400;
              font-size: 24rpx;
              color: #848484;
              margin: 6rpx 0;

              text{
                font-weight: 400;
                font-size: 24rpx;
                color: #848484;
                margin-left: 8rpx;
              }
            }
          }
          .backturn{
            width: 104rpx;
            height: 48rpx;
            border-radius: 24rpx;
            border: 2rpx solid #16DFF2;
            font-family: PingFangSC, PingFang SC;
            font-weight: 400;
            font-size: 24rpx;
            color: #16DFF2;
            line-height: 48rpx;
            text-align: center;
            margin-right: 30rpx;
            margin-top: 16rpx;
          }

          
        }

      }

      .item-posting{
        height: 144rpx;
      }
    } 

    .is-end{
      text-align: center;
      margin: 20rpx;
      color: #8a8a8a;
    }
  }
</style>